<template>
    <div class="cnet_container">
        <Search @search="onSearch" @reset="onReset" />
        <div class="btn_card">
            <el-button v-auth="'distribution_goods:add_set'" type="primary" @click="onAddGoods(true)">
                新增商品
            </el-button>
        </div>
        <Table :list="state.list" @setting="onSet" @remove="onRemove" />
        <Pagination
            :total="state.totalCount"
            :page-size="params.perPage"
            :current-page="params.page"
            @size-change="onSizeChange"
            @pageChange="onPageChange" />
        <SetDialog ref="SetDialogRef" @save="getList" />
        <AddSetDialog ref="AddSetDialogRef" @close="onAddGoods(false)" @save="getList" />
        <ZwChooserGoodsNew
            v-if="state.goodsShow"
            ref="ZwChooserGoodsNewRef"
            :request="{ method: 'POST', url: '/tenant/dtb/goods/search' }"
            :params="chooserGoodsParams"
            :btnShow="false"
            :isStock="true"
            @handle-confirm="getSelected"
            @closed="onClosed"
            :isMulti="true" />
    </div>
</template>

<script setup>
import Search from './search.vue';
import Table from './table.vue';
import SetDialog from './setDialog.vue';
import AddSetDialog from './addSetDialog.vue';
import Pagination from '@/components/Pagination.vue';
import request from '@/request';
import { ElMessage } from 'element-plus';
import { nextTick, onMounted, reactive, ref } from 'vue';

const params = reactive({
    goodsName: '',
    shopId: 0,
    page: 1,
    perPage: 10
});
const state = reactive({
    list: [],
    totalCount: 0,
    goodsShow: true
});

const getList = async () => {
    const { data } = await request('getGoodsListServ', params);
    state.list = data.list || [];
    state.totalCount = data.totalCount || 0;
};
const onSizeChange = v => {
    params.perPage = v;
    getList();
};
const onPageChange = v => {
    params.page = v;
    getList();
};
const onSearch = v => {
    params.page = 1;
    Object.assign(params, v);
    getList();
};
const onReset = v => {
    Object.assign(params, v);
    getList();
};

/* 新增商品 */
const ZwChooserGoodsNewRef = ref(null);
const AddSetDialogRef = ref(null);
const chooserGoodsParams = reactive({});

const onAddGoods = flag => {
    if (flag) {
        for (let key in chooserGoodsParams) {
            delete chooserGoodsParams[key];
        }
    }
    ZwChooserGoodsNewRef.value.handleVisible(true);
};
const getSelected = async ({ chooseIds, params }) => {
    Object.assign(chooserGoodsParams, params);
    AddSetDialogRef.value.onOpen(chooseIds);
};
const onClosed = () => {
    state.goodsShow = false;
    nextTick(() => {
        state.goodsShow = true;
    });
};

/* 设置 */
const SetDialogRef = ref(null);
const onSet = row => {
    SetDialogRef.value.onOpen(row);
};

/* 删除 */
const onRemove = async row => {
    await request('removeGoodsServ', { id: row.id });
    ElMessage.success('移除成功');
    getList();
};
onMounted(() => {
    getList();
});
</script>

<style lang="scss" scoped>
.cnet_container {
    .btn_card {
        margin-bottom: 16px;
        text-align: right;
    }
}
</style>
